<template>
  <c-dialog
    custom-class="wot-template-field-aev"
    width="1200px"
    :title="multLang('btn_add_a', 'title_ng')"
    :visible.sync="visibles.visible"
    @open="open"
  >
    <c-row-lar>
      <template #left>
        <c-row-view
          :title="multLang('title_category_ah', 'title_dn')"
          class="wot-template-field-aev-type"
        >
          <c-roll class="wot-template-field-aev-roll">
            <c-list
              v-model="form.field_view_type"
              :options="workColumnList"
            ></c-list>
          </c-roll>
        </c-row-view>
      </template>
      <template #right>
        <c-row-view :title="multLang('tab_info_a')">
          <el-form
            :model="form"
            :rules="rules"
            ref="form"
            label-width="100px"
            :validate-on-rule-change="false"
          >
            <c-row :col="4">
              <c-col>
                <el-form-item
                  :label="multLang('title_name_ab_r', ':')"
                  prop="field_code"
                >
                  <el-input v-model="form.field_code"> </el-input>
                </el-form-item>
              </c-col>
              <c-col>
                <el-form-item
                  :label="multLang('title_name_c', ':')"
                  prop="field_name"
                >
                  <c-select
                    v-model="form.field_name"
                    :options="multilingualList"
                  >
                  </c-select>
                </el-form-item>
              </c-col>
              <c-col>
                <el-form-item
                  :label="multLang('title_qe', ':')"
                  prop="field_section_type"
                >
                  <c-select
                    v-model="form.field_section_type"
                    :options="blockList"
                  >
                  </c-select>
                </el-form-item>
              </c-col>
              <c-col>
                <el-form-item
                  :label="multLang('title_b_c', ':')"
                  prop="field_right"
                >
                  <c-select
                    v-model="form.field_right"
                    :options="operationPermissionList"
                  ></c-select>
                </el-form-item>
              </c-col>
              <c-col>
                <el-form-item
                  :label="multLang('title_aau_j', 'title_abaaa_p', ':')"
                  prop="is_required"
                >
                  <el-radio-group v-model="form.is_required">
                    <el-radio
                      v-for="item in logWhetherList"
                      :key="item.value"
                      :label="item.value"
                    >
                      {{ item.label }}
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </c-col>
              <c-col :col="11">
                <el-form-item
                  :label="multLang('title_aas_b', ':')"
                  prop="field_remark"
                >
                  <c-input-text v-model="form.field_remark"></c-input-text>
                </el-form-item>
              </c-col>
            </c-row>
          </el-form>
        </c-row-view>
        <Linkage :data="data" @submit="updateLinkList"></Linkage>
      </template>
    </c-row-lar>
    <template #footer>
      <el-button @click="cancel">
        {{ multLang('btn_cancel_a') }}
      </el-button>
      <el-button type="primary" @click="submit">
        {{ multLang('btn_sure_a') }}
      </el-button>
    </template>
  </c-dialog>
</template>
<script>
import { editProcessFieldData, getProcessFieldInfo } from '@/http/api/v1/wot'
import { ObjectCopy } from '@/util'
import Linkage from './Linkage.vue'
export default {
  name: 'ProcessFieldAev',
  components: { Linkage },
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      visibles: {
        edit: false,
        visible: false
      },
      form: {
        id: '',
        field_view_type: 'text',

        field_code: '',
        field_name: '',
        field_section_type: '',
        field_right: 'edit',
        is_required: '1',
        field_remark: '',
        linkList: []
      }
    }
  },
  computed: {
    rules() {
      return {
        field_code: {
          required: true,
          message: this.multLang('text_d', 'title_name_ab_r'),
          trigger: 'blur'
        },
        field_name: {
          required: true,
          message: this.tplLang('text_choose_a', ['title_name_c']),
          trigger: 'change'
        },
        field_section_type: {
          required: true,
          message: this.tplLang('text_choose_a', ['title_qe']),
          trigger: 'change'
        },
        field_right: {
          required: true,
          message: this.tplLang('text_choose_a', ['title_b_c']),
          trigger: 'change'
        }
      }
    },
    workColumnList() {
      return this.optionList('work_column')
    },
    multilingualList() {
      return this.optionList('multilingual')
    },
    blockList() {
      return this.optionList('block')
    },
    operationPermissionList() {
      return this.optionList('operation_permission')
    },
    logWhetherList() {
      return this.optionList('log_whether')
    }
  },
  watch: {},
  beforeCreate() {},
  created() {
    this.setOption({ key: 'work_column' })
    this.setOption({ key: 'multilingual' })
    this.setOption({ key: 'block' })
    this.setOption({ key: 'operation_permission' })
    this.setOption({ key: 'log_whether' })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    add() {
      this.visibles.edit = false
      this.visibles.visible = true
    },
    edit() {
      this.visibles.edit = true
      this.visibles.visible = true
    },
    open() {
      this.visibles.edit && this.query()
    },
    query() {
      const { id } = this.data
      id &&
        getProcessFieldInfo({
          id
        }).then(({ data }) => ObjectCopy(this.form, data))
    },
    cancel() {
      ObjectCopy(this.form, this.$options.data().form)
      this.visibles.visible = false
      this.$nextTick().then(() => this.$refs.form.clearValidate())
    },
    submit() {
      const { id, field_form_code } = this.data
      id &&
        this.$refs.form.validate(
          valid =>
            valid &&
            editProcessFieldData({
              id,
              field_form_code,
              ...this.form
            }).then(({ code }) => {
              if (code === 200) {
                this.cancel()
                this.$emit('query')
              }
            })
        )
    },
    updateLinkList(data) {
      this.form.linkList = data
    }
  }
}
</script>
<style lang="scss">
.wot-template-field-aev {
  height: 700px;

  &-type {
    height: 100%;
    .c-row-view-header {
      margin-bottom: 0;
    }
  }
  &-roll {
    height: calc(100% - 58px);
  }
}
</style>
